<template>
	<view>
		<u-navbar :is-back="true" title="个人身份认证"></u-navbar>
		<view class="content">
			<view class="baoming-form">
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">认证人姓名</view>
					<view class="baoming-cell-input">
						<input type="text" placeholder="请输入真实姓名"  placeholder-style="font-size:24rpx;" />
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="baoming-form">
				<view class="baoming-form-cell">
					<view class="baoming-cell-title">身份证号</view>
					<view class="baoming-cell-input">
						<input type="text" placeholder="请输入身份证号"  placeholder-style="font-size:24rpx;" />
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="upload-box">
				<view class="upload-sfz-top">上传身份证照片</view>
				<view class="upload-item">
					<view class="upload-item-cell">
						<image src="../../static/img/acitivity/charutupian.png" class="upload-icon"></image>
						<view class="u-font-30 upload-btn">上传照片</view>
					</view>
					<view class="upload-item-cell">
						<image src="../../static/img/acitivity/charutupian.png" class="upload-icon"></image>
						<view class="u-font-30 upload-btn">上传照片</view>
					</view>
				</view>
				<view class="upload-tips">
					<view class="color5 tips-text">上传说明</view>
					<view class="color5 tips-text">1.请上传自己真实身份证</view>
					<view class="color5 tips-text">2.请保持证件照完整、光线充足</view>
				</view>
			</view>
			<view class="renzheng">
				<u-button shape="circle" :hair-line="false" hover-class="none" class="btn-style">提交认证</u-button>
			</view>
		</view>
		<tarBer :totarBer='tar'></tarBer>
	</view>
</template>

<script>
	import tarBer from '../../components/tabBarFoot/tabBarFoot.vue'
	export default {
		components:{
				 tarBer
			 },
		data() {
			return {
				tar:{
						color:'#fff',
						id:1		 
				}
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ebebeb;
}
.content{
	margin-top: 20rpx;
}
.baoming-form{
	background-color: #FFFFFF;
	
	.baoming-form-cell{
		padding: 40rpx 50rpx;
		border-bottom: 1px solid #ebebeb;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.baoming-cell-title{
			font-size: 24rpx;
			color: #515151;
		}
		.baoming-cell-input{
			text-align: right;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			input{
				margin-bottom: 0;
				font-size: 24rpx;
			}
		}
	}
}
.upload-box{
	background-color: #FFFFFF;
	padding: 0 50rpx;
}
.upload-sfz-top{
	padding: 40rpx 0rpx;
	font-size: 28rpx;
	
}
.upload-item{
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
	.upload-item-cell{
		width: 49%;
		height:230rpx;
		border-radius: 20rpx;
		margin: 0 10rpx;
		background-color: #eeeeee;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.upload-icon{
			width: 64rpx;
			height: 64rpx;
		}
		.upload-btn{
			font-size: 32rpx;
			color: #989898;
			margin-top: 15rpx;
		}
	}
}
.upload-tips{
	padding-bottom: 40rpx;
	.tips-text{
		margin-bottom: 30rpx;
		font-size: 24rpx;
	}
}
.renzheng{
	margin: 60rpx 135rpx;
	.btn-style{
		background-color: #2581c3;
		color: #FFFFFF;
	}
}
</style>
